Hoje em dia com as ferramentas que nos auxiliam ficou fácil e prático fazer um menu utilizando seus recursos.
Para construção de menus um dos melhores recursos é o BootStrap e como ele é um padrão, responsivo e só tem vantagens a gente costuma muito usar ele para fazer esses menus mas sempre é bom saber o que dá pra fazer com a ferramenta pura.
Como recursos básicos de um Menu simples diria que são :
1-Indicação de que página nos encontramos do menu.
2-No mouse over mudar a cor de fundo.
3-O estilo dos itens devem ser completamente customizáveis para o que desejamos fazer.
Este é um dos padrões mais usados na web. Um menu horizontal e, normalmente, perto do cabeçalho da página. É um padrão feito se comparado ao bootstrap mas muito prático.
Este menu é feito com puro html e CSS. Nada de JavaScript. Todos os itens são personalizaveis e este é o grande motivo de usar esses menus, muito simples de utilizar, personalizar, etc.
Este menu é o mais simples e, a meu ver, o mais feio mas é feito totalmente com tecnologia da web 1.0.
<style>
ul {
margin: 0;
padding: 0;
list-style: none;
width: 650px;
float: left; /*exibição do fundo da ul*/
}
ul li {
float: left; /*coloca o menu na horizontal*/
margin:1px; /*magem entre os itens li e a borda da ul*/
padding:1px;
}
ul a {
display: block;
padding: 0 2em;
line-height: 2em;
text-decoration: none;
color: #fff;
}
ul .primeiro a {
background: none;
}
ul a:hover {
color: #085662;
background: #44cade;
}
#home #navegacao .home a, #sobre #navegacao .sobre a {
color: #085662;
background: #44cade;
}
#navegacao {
display:table;
margin-left:25%;
background-color:#085662;
}
</style>
<ul id="navegacao">
<li class="home primeiro"><a href="#">Home</a></li>
<li class="sobre"><a href="#">Sobre</a></li>
<li class="servicos"><a href="#">Serviços</a></li>
<li class="noticias"><a href="#">Notícias</a></li>
<li class="contato"><a href="#">Contato</a></li>
</ul>